// 1、【准备】打开网页创建【网页顶部加载进度条】进度10%；

// 2、【定时器】定义num1变量默认0，每隔10ms ++ 作为【网页顶部加载进度条】进度

// 3、【判断】如果【网页顶部加载进度条】已存在直接修改【进度】无需重复创建

// 4、【判断】进度100%  也就是 【num>=100】则【1-移除进度条】【2-清除定时器】

// 5、【优化1】网页未加载完毕，暂停操作进度条  // 调试的时候，将网速调成【Slow 3G】 看效果

// 6、【优化2】网页右上角增加一个旋转盒模型
var num1 = 0
var over = false
t = setInterval(function(){
    
    var nprogress = document.querySelector(".nprogress")
    //优化1
    if(num1>=95 && !over){
        return
    }
    num1 ++
//【判断】如果【网页顶部加载进度条】已存在直接修改【进度】无需重复创建
 if (nprogress){
    nprogress.style.width = num1 +"%"
 } else {
    var nprogress = document.createElement("div")
    nprogress.className = "nprogress"
    nprogress.style.position ="fixed"
    nprogress.style.top = "0px"
    nprogress.style.width = num1 +"%"
    nprogress.style.height = "3px"
    nprogress.style.backgroundColor= "#29d"
    document.body.appendChild(nprogress)

    // 优化2：创建一个加载的旋转模型
    var nprogressRadius = document.createElement('div')
    nprogressRadius.className = 'nprogressRadius'
    document.body.appendChild(nprogressRadius)
 }

 //【判断】进度100%  也就是 【num>=100】则【1-移除进度条和加载旋转模型】【2-清除定时器】
 if (num1>=100){
     document.body.removeChild(nprogress)
     clearInterval(t)
     document.body.removeChild(document.querySelector(".nprogressRadius"))
 }
},10)

window.onload = function() {
    over = true
}